 <template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-input v-if="false" v-model="search.pageNum"></el-input>
                <el-input v-if="false" v-model="search.pageSize"></el-input>
                <el-col :span="4">
                    <el-input v-model="search.carName" placeholder="请输入车名"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="search.name" placeholder="请输入车牌"></el-input>
                </el-col>
                <el-col :span="12"
                    ><div>
                        <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                        <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button>
                    </div>
                </el-col></el-form
            >
            <el-button type="primary" @click="addBtn" icon="el-icon-circle-plus">新增</el-button>
            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="#" sortable> </el-table-column>

                <el-table-column
                        prop="headPic"
                        label="头像">
                    <template slot-scope="scope">
                        <img :src="scope.row.headPic" width="80" height="80"/>
                    </template>
                </el-table-column>
                <el-table-column prop="carName" label="车名"> </el-table-column>
                <el-table-column prop="brand.name" label="车牌"> </el-table-column>
                <el-table-column prop="carType.typeName" label="类型"> </el-table-column>
                <el-table-column prop="vin" label="车辆识别码" width="120px"> </el-table-column>
                <el-table-column prop="carTypeConfigDetails.airSuction" label="进气方式"> </el-table-column>
                <el-table-column prop="carTypeConfigDetails.seating" label="座位数"> </el-table-column>
                <el-table-column prop="carTypeConfigDetails.displacement" label="排量"> </el-table-column>
                <el-table-column prop="carTypeConfigDetails.fcphk" label="百公里油耗" width="100px"> </el-table-column>
                <el-table-column prop="buyPrice" label="进价"> </el-table-column>
                <el-table-column prop="price" label="租价"> </el-table-column>
<!--                <el-table-column prop="state" label="状态"  :formatter="getStatusName">-->
                <el-table-column prop="state" label="状态"  >
                    <template  slot-scope="scope">
<!--                        :formatter="getStatusName"-->
                        <el-tag  :type="getStatusColor(scope.row.state)">{{getStatusName(scope.row.state)}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="shop.name" label="门店" width="100px"> </el-table-column>
                <el-table-column prop="intro" label="简介" width="200px"> </el-table-column>
                <el-table-column label="操作" width="300px" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updateInfo(scope.$index, scope.row)" icon="el-icon-edit" type="success"
                            >编辑</el-button
                        >
                        <el-button size="mini" @click="deleteInfo(scope.$index, scope.row)" icon="el-icon-delete" type="danger"
                            >删除</el-button
                        >
                        <el-button size="mini" @click="maintainBtn(scope.$index, scope.row)" icon="el-icon-edit" type="success"
                            >维修管理</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[1, 5, 10, 20, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
            >
            </el-pagination>
            <!--新增/修改 Form -->
            <el-dialog title="车辆管理" :visible.sync="editInfoState">

                <el-form :model="formInfo">
                    <el-upload
                            class="avatar-uploader"
                            :headers="headerObj"
                            :auto-upload="true"
                            action="http://192.168.1.49:9999/common/upload/sure"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            :model="formInfo.headPic"
                    >
                        <img v-if="headPic" :src="headPic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-form-item label="车名" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.carName" placeholder="车名" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="车类型" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.type" placeholder="请选择">
                            <el-option
                                    v-for="item in optionsType"
                                    :key="item.id"
                                    :label="item.typeName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车牌" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.brandId" placeholder="请选择">
                            <el-option
                                    v-for="item in optionsBrand"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="配置" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.configId" placeholder="请选择">
                            <el-option
                                    v-for="item in optionsConfig"
                                    :key="item.id"
                                    :label="item.typename"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆进价" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.buyPrice" placeholder="车辆进价" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆租价" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.price" placeholder="车辆租价" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆状态" :label-width="formLabelWidth">
                        <el-radio v-model="formInfo.state" :label="1">可租</el-radio>
                        <el-radio v-model="formInfo.state" :label="2">维修中</el-radio>
                        <el-radio v-model="formInfo.state" :label="3">租出</el-radio>
                        <el-radio v-model="formInfo.state" :label="4">禁用</el-radio>
                    </el-form-item>
                    <el-form-item label="门店" :label-width="formLabelWidth">
                        <el-select v-model="formInfo.shopId" placeholder="请选择">
                            <el-option
                                    v-for="item in optionsShop"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="简介" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.intro" placeholder="简介" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆识别码" :label-width="formLabelWidth">
                        <el-input v-model="formInfo.vin" placeholder="车辆识别码" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="quxiao">取 消</el-button>
                    <el-button type="primary" @click="saveInfo">确 定</el-button>
                </div>
            </el-dialog>
            <!--修改 维修 Form -->
            <el-dialog title="维修记录管理" :visible.sync="editMaintainState">
                <el-form :model="formMaintainInfo">
                    <el-form-item  :label-width="formLabelWidth">
                    <el-input v-if="false" v-model="formMaintainInfo.id" placeholder="维修车id" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="维修车名称" :label-width="formLabelWidth">
                        <el-input :disabled="true" v-model="formMaintainInfo.carName" placeholder="维修车名称" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="维修厂名" :label-width="formLabelWidth">
                        <el-select v-model="formMaintainInfo.maintainShopId" placeholder="请选择">
                            <el-option
                                    v-for="item in optionsMaintain"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">

                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="维修金额" :label-width="formLabelWidth">
                        <el-input v-model="formMaintainInfo.amount" placeholder="维修金额" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="formMaintainInfo.remark" placeholder="备注" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editMaintainState = false">取 消</el-button>
                    <el-button type="primary" @click="saveMaintainInfo">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);

export default {
    data() {
        return {
            tableData: [],
            page: {},
            formInfo: {},
            formMaintainInfo:{},
            search: { pageNum: 1, pageSize: 10 ,name:"",carName:""},
            formLabelWidth: '120px',
            editInfoState: false,
            editMaintainState: false,
            optionsType: [],
            optionsBrand: [],
            optionsConfig: [],
            optionsShop: [],
            optionsMaintain: [],
            headPic:'',
        };
    },
    created: function () {
        this.load();
        this.loadType();
        this.loadBrand();
        this.loadConfig();
        this.loadShop();
        this.loadMaintain();
    },
    computed: {
        headerObj(){
            return{
                // token:localStorage.getItem("token")
                token: this.token
            };
        }
    },
    methods: {
        //初始化数据
        quxiao(){
            this.editInfoState = false;
            this.load();
        },
        load() {
            var _this = this;
            //页面初始化时，加载的方法
            this.$http.post('/cars/car/typeAll', this.search).then((response) => {
                _this.tableData = response.data.data.list;
                _this.page = response.data.data;
                _this.total = response.data.data.total;
            });
        },

        loadType() {
            var _this = this;
            this.$http
                .get('/cars/carType/typeAlls', {
                    params: {
                        pageNo: 1,
                        pageSize: 100000
                    }
                })
                .then((response) => {
                    _this.optionsType = response.data.data;
                });
        },
        loadMaintain() {
            var _this = this;
            this.$http.get('/cars/car/listTainShop').then((response) => {
                _this.optionsMaintain = response.data.data;
            });
        },

        loadBrand() {
            var _this = this;
            this.$http
                .get('/cars/car/list', {
                    params: {
                        pageNo: 1,
                        pageSize: 100000
                    }
                })
                .then((response) => {
                    _this.optionsBrand = response.data.data;
                });
        },
        loadConfig() {
            var _this = this;
            this.$http
                .get('/cars/typeConfig/typeAll', {
                    params: {
                        pageNo: 1,
                        pageSize: 100000
                    }
                })
                .then((response) => {
                    _this.optionsConfig = response.data.data;
                });
        },
        loadShop() {
            var _this = this;
            this.$http
                .get('/cars/car/listShop', {
                    params: {
                        pageNo: 1,
                        pageSize: 100000
                    }
                })
                .then((response) => {
                    _this.optionsShop = response.data.data;
                });
        },
        //每页显示数量发生变化
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.search.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.search.pageNum = val;
            this.load();
        },
        //查询
        searchBtn() {
            console.log(`当前页`);
            this.load();
        },
        //刷新
        emptyBtn() {
            this.search = {};
            this.search.pageNum = 1;
            this.search.pageSize = 5;
            this.load();
        },
        // getStatusName(row,column,state) {
        getStatusName(state) {
            // return cellValue == 1 ? '启用' : '禁用';
            var tmpType = '';
            if (state == 1) {
                tmpType = '可租';
            } else if (state == 2) {
                tmpType = '维修中';
            } else if (state == 3) {
                tmpType = '租出';
            } else if (state == 4) {
                tmpType = '禁用';
            }
            return tmpType;
        },
        getStatusColor(state) {
            // return cellValue == 1 ? '启用' : '禁用';
            var tmpType = '';
            if (state === 1) {
                tmpType = 'success';
            } else if (state === 2) {
                tmpType = 'waring';
            } else if (state === 3) {
                tmpType = 'info';
            } else if (state === 4) {
                tmpType = 'danger';
            }
            return tmpType;
        },
        addBtn() {
            this.formInfo = {};
            this.headPic="";
            this.editInfoState = true;
        },
        updateInfo: function (index, row) {
            this.formInfo = row;
            this.headPic = row.headPic;
            console.log("============================"+this.formInfo.headPic)
            this.editInfoState = true;
        },
        maintainBtn: function (index, row) {
            this.formMaintainInfo.carId = row.id;
            this.formMaintainInfo.carName = row.carName;
            this.editMaintainState = true;
        },
        saveMaintainInfo: function () {
            var _this = this;
            console.log("22222:"+_this.formMaintainInfo.carId);
            axios
                .post('/cars/car/listTainRecord', _this.formMaintainInfo)
                .then(function (response) {
                    //提示成功
                    _this.$message({
                        type: 'success',
                        message: '添加维修记录成功!'
                    });
                    //正确请求时，回调函数
                    console.log(response);
                    _this.load();
                    _this.editMaintainState = false;
                    _this.formMaintainInfo={};
                })
                .catch(function (error) {
                    _this.$message.error('你错了。。。');
                    _this.editMaintainState = false;
                    _this.load();
                    //失败处理
                    console.log(error);
                });
        },
        saveInfo: function () {
            var _this = this;
            _this.formInfo.headPic=_this.headPic;
            if (_this.formInfo.id != null && _this.formInfo.id != '' && _this.formInfo.id != undefined) {
                axios
                    .post('/cars/car/update', _this.formInfo)
                    .then(function (response) {
                        //提示成功
                        _this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        //正确请求时，回调函数
                        console.log(response);
                        _this.load();
                        _this.editInfoState = false;
                    })
                    .catch(function (error) {
                        _this.$message.error('你错了。。。');
                        _this.editInfoState = false;
                        _this.load();
                        //失败处理
                        console.log(error);
                    });
            } else {
                axios
                    .post('/cars/car/insert', _this.formInfo)
                    .then(function (response) {
                        //提示成功
                        _this.$message({
                            type: 'success',
                            message: '新增成功!'
                        });
                        //正确请求时，回调函数
                        _this.load();
                        _this.editInfoState = false;
                    })
                    .catch(function (error) {
                        _this.$message.error('你错了。。。');
                        //失败处理
                        console.log(error);
                    });
            }
        },
        deleteInfo: function (index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var _this = this;
                    axios
                        .delete('/cars/car/del?id=' + row.id)
                        .then(function (response) {
                            if (response.status == 200) {
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //重新加载数据
                                _this.load();
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('你错了。。。');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },handleAvatarSuccess(res, file) {
            // this.headPic = URL.createObjectURL(file.raw);
            console.log(res.data);
            console.log(file);
            this.headPic = res.data;
        },
    }
};
</script>
<style>
    .avatar-uploader  {
        border: 1px dashed #d9d9d9;
        width: 360px;
        height: 180px;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 40px;
        color: #8c939d;
        width: 350px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
</style>
